<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-d3-graphs</title>
    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<style>
    .line {
        fill: none;
        stroke: green;
        stroke-width: 5px;
    }
</style>

<body>

</body>
<script>
    var margin = { top: 20, right: 20, bottom: 30, left: 50 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    var valueline = d3.line()
        .x(function (d) { return x(d.year); })
        .y(function (d) { return y(d.population); });

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g").attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("data.csv", function (error, data) {
        if (error) throw error;
        data = [
            { year: 2016, population: 40 },
            { year: 2018, population: 50 },
            { year: 2020, population: 60 },
            { year: 2022, population: 70 },
            { year: 2024, population: 80 },
            { year: 2026, population: 90 },
            { year: 2028, population: 100 },
        ]

        x.domain(d3.extent(data, function (d) { return d.year; }));
        y.domain([0, d3.max(data, function (d) { return d.population; })]);
        console.log(x, "===============", y)
        svg.append("path")
            .data([data])
            .attr("class", "line")
            .attr("d", valueline);

        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        svg.append("g")
            .call(d3.axisLeft(y));
    })
</script>

</html>